<template>
	<view class="container">
		<topBar>员工详情</topBar>
		<view class="content">
			<view class="type">
				已认证
			</view>
			<view class="line">
				<view class="title">
					<view class="info">
						<image class="avatar" src="/static/img/my/avatar.png"></image>
						<view class="right">
							<view class="name">
								张先生
							</view>
							<view class="age primary">
								45岁
							</view>
						</view>
					</view>
				</view>
				<view class="val">
					<view class="phone">
						<text class="primary">13511111111</text>
						<image class='icon-phone' src="/static/img/common/phone.png"></image>
					</view>
				</view>
			</view>
			<view class="line">
				<view class="title">
					身份证号
				</view>
				<view class="val">
					510622111111113454
				</view>
			</view>
			<view class="line">
				<view class="title">
					所属厂区
				</view>
				<view class="val">
					原料区
				</view>
			</view>
			<view class="line">
				<view class="title">
					员工类型
				</view>
				<view class="val">
					厂区负责人
				</view>
			</view>
			<view class="line">
				<view class="title">
					累计收料方量
				</view>
				<view class="val primary">
					2400方
				</view>
			</view>
			<view class="line">
				<view class="title">
					累计出料方量
				</view>
				<view class="val primary">
					2400方
				</view>
			</view>
			<view class="line">
				<view class="title">
					个人照片
				</view>
				<view class="val">
					<image class="img" src="/static/img/temp/my.png"></image>
				</view>
			</view>
			<view class="line">
				<view class="title">
					身份证正面
				</view>
				<view class="val">
					<image class="img" src="/static/img/my/idCard1.png"></image>
				</view>
			</view>
			<view class="line">
				<view class="title">
					身份证背面
				</view>
				<view class="val">
					<image class="img" src="/static/img/my/idCard2.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
	.content {
		position: relative;
		margin: 32rpx;
		padding-top: 60rpx;
		padding-bottom: 140rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 8rpx;
		box-sizing: border-box;

		.type {
			position: absolute;
			left: 0;
			top: 0;
			padding: 9rpx 30rpx;
			color: #fff;
			background: linear-gradient(270deg, #6BA8FA 0%, #2E87FF 100%);
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 8rpx 0rpx 24rpx 0rpx;
			z-index: 1;
		}

		.line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			font-size: 28rpx;
			border-bottom: 2rpx solid rgba(156, 159, 163, .1);

			.info {
				display: flex;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				.name {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}


			}

			.val {
				font-weight: bold;
			}

			.phone {
				display: flex;
				align-items: center;
				margin-right: -20rpx;
				padding: 32rpx 28rpx;
				background: #EFF6FE;
				border-radius: 50rpx 0rpx 0rpx 50rpx;
			}

			.icon-phone {
				margin-left: 6rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.primary {
				color: $primary-color;
			}

			.img {
				width: 208rpx;
				height: 136rpx;
				// background-color: #ddd;
			}
		}
	}
</style>